@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Raleway:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

html {
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    user-select: none
}

.container { display: none }

.store-bg {
    width: 60%;
    height: 80%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-wrap: wrap;
    align-content: center;
    overflow: hidden;
}

.store-bg .logo {
    width: 225px;
    height: 225px;

    position: absolute;
    top: 8.5%;
    left: 50222%;
    transform: translate(-50%, -50%)
}

.store-bg .store-products {
    width: 70%;
    height: 82.6%;
    
    margin-top: 300px;
    background: rgb(35, 44, 51);

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: start;

    overflow-y: scroll
}

.store-bg .store-products::-webkit-scrollbar {
    display: none;
}

.store-bg .store-products .store-product {
    background: rgb(35, 44, 51);
    border: 1px solid rgb(100, 100, 100);
    border-radius: 5px;
    
    height: 300px;
    width: 261.5px;

    margin-left: 5px;
    margin-top: 5px;
}

.store-bg .store-products .store-product .image-bg {
    width: 50%;
    height: 50%;

    display: block;
    margin: 0 auto;
}

.store-bg .store-products .store-product .image-bg img {
    max-width: 100%;
    max-height: 100%;

    display: block;
    margin: 0 auto;
    margin-top: 50px
}

.store-bg .store-products .store-product p[label] {
    text-align: center;
    font-size: 22px;
    color: white;

    width: 100%;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    
    position: relative;
    top: -29px;
}

.store-bg .store-products .store-product p[price] {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    color: white;
    
    position: relative;
    top: -55px;
}

.store-bg .store-products .store-product .actions {
    width: 150px;
    height: 40px;
    
    position: relative;
    top: -18%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
}

.store-bg .store-products .store-product .actions .btn {
    position: relative;
    left: 5px;
}

.store-bg .store-products .store-product .actions .btn.add {
    position: relative;
    left: 16px;
}

.store-bg .store-products .store-product .actions p[amount] {
    font-family: 'Lato', sans-serif;
    color: white;
    font-size: 20px;
    width: 50px;

    position: relative;
    left: 14px;
    top: -15px;

}

.store-bg .store-cart {
    background: rgb(35, 44, 51);
    width: 25%;
    min-height: 100%;

    margin-left: 55px;
    margin-top: 300px;
    float: left;
}

.store-bg .store-cart p[label] {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    color: white;
}

.store-bg .store-cart .cart-list {
    width: 250px;
    height: 500px;

    display: block;
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    color: white;

    overflow-y: scroll
}

.store-bg .store-cart .cart-list::-webkit-scrollbar {
    display: none;
}

.store-bg .store-cart .cart-list span {
    position: relative;
    top: 6px;
}

.store-bg .store-cart a {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    width: 50%;
}

#toast-container {
    top: 23%;
    left: 80%;
}

.toast {
    background: rgb(35, 44, 51);
    font-family: 'Lato', sans-serif;
    color: white;
    border-radius: 0px;
    box-shadow: none;

    min-width: 150px;
    max-width: 500px;
    min-height: 60px;
}